<template>
  <view class="flex">
    <a-card title="基本用法">
      <div class="boxs">
        <a-popover position="tl">
          <a-button class="button">TL</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="top">
          <a-button class="button">TOP</a-button>
          <template #content>
            <a-button>我在干嘛？</a-button>
          </template>
        </a-popover>
        <a-popover position="tr">
          <a-button class="button">TR</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="bl">
          <a-button class="button">BL</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="bottom">
          <a-button class="button">BOTTOM</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="br">
          <a-button class="button">BR</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="lt">
          <a-button class="button">LT</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="left">
          <a-button class="button">LEFT</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="lb">
          <a-button class="button">LB</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="rt">
          <a-button class="button">RT</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="right">
          <a-button class="button">RIGHT</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
        <a-popover position="rb">
          <a-button class="button">RB</a-button>
          <template #content>
            <p>Here is the text content</p>
          </template>
        </a-popover>
      </div>
    </a-card>
  </view>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  background: #e5e5e5;
}

.boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
